<template>
  <status-bar barBackgroundColor="#c8e5ff" />
  <view class="home-page">
    <bg-set background="linear-gradient(#c7e5ff,#f1f6fc)" />
    <view class="home-page__campus-scenery">
      <swiper
        :indicator-dots="true"
        :autoplay="true"
        :interval="5000"
        :duration="500"
        class="my-swipe"
        indicator-active-color="#fff"
      >
        <swiper-item v-for="image in images">
          <image :src="image" style="width: 100%; height: 100%"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="home-page__function-module">
      <view class="main f">
        <view class="pick-up f ai-c jc-c" @click="pickUpClick">
          <view class="f ai-c">
            <image
              src="/static/image/home/pick-up.png"
              mode="widthFix"
              style="width: 100rpx"
            ></image>
            <text
              style="
                font-size: 35rpx;
                color: #fff;
                margin-left: 10rpx;
                margin-right: 10rpx;
              "
              >取包裹</text
            >
            <image
              src="/static/image/home/arrow-right.png"
              mode="widthFix"
              style="width: 50rpx"
            ></image>
          </view>
        </view>
        <view class="f f1 fd-col jc-sb ai-c">
          <view class="mail f jc-c ai-c" @click="mailClick">
            <image
              src="/static/image/home/mail.png"
              mode="widthFix"
              style="width: 40rpx"
            ></image>
            <text style="font-size: 35rpx; color: #fff; margin-left: 10rpx"
              >寄包裹</text
            >
          </view>
          <view class="complaint f jc-c ai-c" @click="complaintClick">
            <image
              src="/static/image/home/complaint.png"
              mode="widthFix"
              style="width: 40rpx"
            ></image>
            <text style="font-size: 35rpx; color: #fff; margin-left: 10rpx"
              >投诉</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ImagePreview } from "vant";
import homeAPI from "/api/modules/home";
export default {
  name: "home-page",
  data() {
    return {
      images: [],
    };
  },
  onShow() {
    this.getCampusScenery();
  },
  methods: {
    getCampusScenery() {
      homeAPI
        .getCampusScenery()
        .then((res) => {
          // 随机获取3张图片数据
          const randomNumber = Math.floor(Math.random() * res.length);
          if (randomNumber <= res.length - 3) {
            this.images = res
              .slice(randomNumber, randomNumber + 3)
              .map((item) => "data:image/png;base64," + item);
          } else {
            this.images = [].concat(
              res
                .slice(randomNumber)
                .map((item) => "data:image/png;base64," + item),
              res
                .slice(0, 3 - res.slice(randomNumber).length)
                .map((item) => "data:image/png;base64," + item)
            );
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "获取图片失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          this.images = [
            "/static/image/profile/image_loading_error.png",
            "/static/image/profile/image_loading_error.png",
            "/static/image/profile/image_loading_error.png",
          ];
          console.log(err);
        });
    },
    clickToPreview(e) {
      if (
        e.target.src !==
        "http://localhost:3000/static/image/profile/image_loading_error.png"
      ) {
        ImagePreview([e.target.src]);
      }
    },
    pickUpClick() {
      uni.navigateTo({
        url: "/pages/home/pick-up-management",
      });
    },
    mailClick() {
      uni.switchTab({
        url: "/pages/mail/mail",
      });
    },
    complaintClick() {
      uni.navigateTo({
        url: "/pages/profile/feedback/feedback",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  &__campus-scenery {
    width: 100%;
    height: 500rpx;
    background-color: #fff;
    .my-swipe {
      width: 100%;
      height: 100%;
    }
  }
  &__function-module {
    margin-top: 50rpx;
    width: 100%;
    .main {
      width: 100%;
      .pick-up {
        margin-right: 20rpx;
        width: 48%;
        height: 180rpx;
        border-radius: 20rpx;
        box-shadow: 2px 2px 2px #30c1fd;
        background: linear-gradient(#006ffc, #30c1fd);
      }
      .mail {
        width: 100%;
        height: 80rpx;
        border-radius: 20rpx;
        box-shadow: 2px 2px 2px #00d545;
        background: linear-gradient(to bottom right, #01d342, #00d545);
      }
      .complaint {
        width: 100%;
        height: 80rpx;
        border-radius: 20rpx;
        box-shadow: 2px 2px 2px #00d545;
        background: linear-gradient(to bottom right, #01d342, #00d545);
      }
    }
  }
}
</style>
